<!-- 注册弹框 -->
<template>
    <u-popup :show="showPoup" mode="center" @close="close" @open="open" :closeOnClickOverlay="false"
             :custom-style="{'width':'100%','background-color': 'transparent'}">
        <!-- -1未注册 0待审批 2被禁用 1启用 -->
        <view class="popupContent">
            <!--禁用提示-->
            <view class="dialogContent" v-if="accountStatus === 2">
                <view class="registerTxt">该账号已被禁用</view>
                <image class="examineIcon" src="@/static/images/disable_icon.png" mode="widthFix"/>
            </view>

            <!--待审核提示-->
            <view class="dialogContent" v-if="accountStatus === 0">
                <view class="registerTxt">待审核，请耐心等待审核</view>
                <image class="examineIcon" src="@/static/images/examine_icon.png" mode="widthFix"/>
            </view>

            <!--注册提示-->
            <view class="dialogContent" v-if="accountStatus === -1">
                <view class="registerTxt">当前设备未注册，请先注册</view>
                <view class="btnLayout">
                    <view @click="onCommitClick">去注册</view>
                </view>
            </view>
        </view>
    </u-popup>
</template>

<script setup>
defineProps(["showPoup", "accountStatus"])
const emits = defineEmits(['update:showPoup', "commitClick"])

const open = () => {

}

/**
 * 关闭
 */
const close = () => {
    emits('update:showPoup', false)
}

/**
 * 去注册
 */
const onCommitClick = () => {
    emits('update:showPoup', false)

    uni.navigateTo({
        url: `/pages/register/register`
    })
}

</script>

<style scoped lang="scss">
.popupContent {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.dialogContent {
    width: 80%;
    min-height: 100rpx;
    background-color: #FFFFFF;
    border-radius: $border-radius;
    box-sizing: border-box;
    box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dialogTitle {
    font-size: 34rpx;
    color: $uni-color-error;
    letter-spacing: 1rpx;
    margin-bottom: 20rpx;
}

.txtContent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.txt1, .txt2, .txt3 {
    font-size: 32rpx;
    color: #333333;
}

.txt2 {
    margin: 10rpx 0;
}

.txt3 {
    margin-bottom: 10rpx;
}

.registerTxt {
    font-size: 34rpx;
    color: #333333;
    margin: 20rpx 0;
}

.btnLayout {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 20rpx;
}

.btnLayout > view:nth-child(1) {
    flex: 1;
    font-size: 30rpx;
    color: #FFFFFF;
    background-color: $main-color;
    border-radius: $border-radius;
    letter-spacing: 1rpx;
    text-align: center;
    margin: 0 30rpx;
}

.examineIcon {
    width: 194rpx;
    height: 194rpx;
}
</style>